<template>
  <div class="app-container">

    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      empty-text="暂无数据."
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称"  />
      <el-table-column prop="sort" label="排序" width="80" />
      <el-table-column prop="code" label="标识" />

      <el-table-column prop="type" label="类型" width="100" >
        <template slot-scope="scope">
          <span v-if="scope.row.type=='FOLDER'">目录</span>
          <span v-else-if="scope.row.type=='POI_GROUP'">POI</span>
          <span v-else-if="scope.row.type=='RANGE_GROUP'">区域</span>
          <span v-else-if="scope.row.type=='PATH_GROUP'">路径</span>
          <span v-else-if="scope.row.type=='CUSTOM_GROUP'">聚合</span>
           <span v-else-if="scope.row.type=='SCENE'">场景</span>
          <span v-else >--</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button
          v-if="
          scope.row.type=='FOLDER' || scope.row.type=='SCENE'
          "
            type="text"
            icon="el-icon-plus"
            size="small"
            @click="handleAddGroup(scope.row)"
          >分类</el-button>

          <el-button
            v-if="
            scope.row.type!='SCENE' &&
            (scope.row.type=='FOLDER' ||
            scope.row.type=='CUSTOM_GROUP' || scope.row.type=='SCENE' ||
            scope.row.type=='POI_GROUP'  || scope.row.type=='RANGE_GROUP' ||
            scope.row.type=='PATH_GROUP')
            "
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row)"
          >编辑</el-button>


          <el-button
            v-if="
            scope.row.type=='CUSTOM_GROUP' ||
            scope.row.type=='POI_GROUP'  ||
            scope.row.type=='RANGE_GROUP' ||
            scope.row.type=='PATH_GROUP'
            "
            type="text"
            icon="el-icon-view"
            size="small"
            @click="handleView(scope.row)"
          >详情</el-button>

          <el-button
            v-if="
            scope.row.type=='POI_GROUP'
            "
            type="text"
            icon="el-icon-view"
            size="small"
            @click="handleSettingStyle(scope.row)"
          >样式</el-button>
          <el-button
          type="text" icon="el-icon-delete" size="small" @click="deleteRow(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--编辑框-->
    <info-dialog
      v-if="dialogVisible"
      :handle-type="handleType"
      :dialog-visible="dialogVisible"
      :dialog-data="dialogData"
      :parent-id="parentId"
      :scene-id="sceneId"
      :grand-parent-id="grandParentId"
      @closed="dialogClose"
      @refresh="refreshLoadTree"
      @refreshAll="load"
    />

    <PoiTableDialog
      v-if="poiTableDialogVisible"
      :dialog-visible="poiTableDialogVisible"
      :dialog-data="poiTableDialogData"
      @closed="tableDialogVisibleClose"
    />

    <PathTableDialog
      v-if="pathTableDialogVisible"
      :dialog-visible="pathTableDialogVisible"
      :dialog-data="pathTableDialogData"
      @closed="tableDialogVisibleClose"
    />

    <RangeTableDialog
      v-if="rangeTableDialogVisible"
      :dialog-visible="rangeTableDialogVisible"
      :dialog-data="rangeTableDialogData"
      @closed="tableDialogVisibleClose"
    />

    <CustomTableDialog
      v-if="customTableDialogVisible"
      :dialog-visible="customTableDialogVisible"
      :dialog-data="customTableDialogData"
      @closed="tableDialogVisibleClose"
    />

    <PoiGroupStyleDialog
      v-if="poiGroupStyleDialogVisible"
      :dialog-visible="poiGroupStyleDialogVisible"
      :dialog-data="poiGroupStyleDialogData"
      @refresh="refreshLoadTree"
      @closed="styleDialogVisibleClose"
    />

    <PathStyleDialog
      v-if="pathStyleDialogVisible"
      :dialog-visible="pathStyleDialogVisible"
      :dialog-data="pathStyleDialogData"
      @closed="styleDialogVisibleClose"
    />

    <RangeStyleDialog
      v-if="rangeStyleDialogVisible"
      :dialog-visible="rangeStyleDialogVisible"
      :dialog-data="rangeStyleDialogData"
      @closed="styleDialogVisibleClose"
    />

  </div>
</template>
<script>
import {
  findSceneSrcList,
  saveSceneSrc,
  deleteSceneSrc,
  copySceneSrc
} from '@/api/51world/sceneSrc.js'
import {
  isOk
} from '@/utils/request'

import InfoDialog from './components/InfoDialog.vue'
import PoiTableDialog from './components/PoiTableDialog.vue'
import PathTableDialog from './components/PathTableDialog.vue'
import RangeTableDialog from './components/RangeTableDialog.vue'
import CustomTableDialog from './components/CustomTableDialog.vue'



import PoiGroupStyleDialog from './components/PoiStyleDialog.vue'
import PathStyleDialog from './components/PathStyleDialog.vue'
import RangeStyleDialog from './components/RangeStyleDialog.vue'


export default {
  name:'SceneSrc',
  components: {
    InfoDialog,
    PoiTableDialog,
    PathTableDialog,
    RangeTableDialog,
    CustomTableDialog,
    PoiGroupStyleDialog,
    PathStyleDialog,
    RangeStyleDialog
  },
  data() {
    return {
      queryForm: {
        keywords: undefined,
        rootId: '0'
      },
      maps: new Map(),
      tableData: [],
      loading:false,
      dialogVisible: false,
      dialogData: {},
      /* 0-新增  1-编辑  2-新增子菜单  3-添加权限点*/
      handleType: '',
      parentId: '',
      sceneId: '',
      grandParentId: '',
      //poi
      poiTableDialogVisible:false,
      poiTableDialogData:{},
      //path
      pathTableDialogVisible:false,
      pathTableDialogData:{},
      //range
      rangeTableDialogVisible:false,
      rangeTableDialogData:{},
      //custom
      customTableDialogVisible:false,
      customTableDialogData:{},
      //style
      rangeStyleDialogVisible:false,
      rangeStyleDialogData:{},
      pathStyleDialogVisible:false,
      pathStyleDialogData:{},
      poiGroupStyleDialogVisible:false,
      poiGroupStyleDialogData:{},
    }
  },

  computed: {},
  created() {
    this.load()
  },
  methods: {
    load(tree, treeNode, resolve) { /* 懒加载树形列表 */
      if (tree != null) {
        this.queryForm.rootId = tree.id
        const parentId = tree.id
        this.maps.set(parentId, {
          tree,
          treeNode,
          resolve
        })
      }else{
        this.queryForm.rootId ='0'
      }
      findSceneSrcList(this.queryForm).then(rsp => { /* 树形列表展开时触发*/
        if (isOk(rsp)) {
          const menus = rsp.data
          if (treeNode) {
            resolve(menus)
          } else {
            this.tableData = menus
          }
        }
      })
    },
    dialogClose: function(e) { /* 关闭弹窗 */
      this.dialogVisible = e
      this.dialogData = {}
    },
    dialogShow: function(e) { /* 打开弹窗 */
      this.dialogVisible = true
    },
    handleAddGroup: function(row) { /*添加分组 */
      this.dialogShow()
      this.parentId = row.id
      this.grandParentId = row.parentId
      this.handleType = row.type
      this.sceneId = row.sceneId
    },
    handleEdit: function(row) { /* 编辑 */
      this.dialogShow()
      this.handleType = '1'
      this.parentId = row.parentId
      this.sceneId = row.sceneId
      // this.grandParentId = row.parentId
      Object.assign(this.dialogData, row)
    },
    handleView: function(row) { /* 详情 */
      if('POI_GROUP'==row.type){
        this.poiTableDialogVisible=true
        this.poiTableDialogData=row
      }
      if('PATH_GROUP'==row.type){
        this.pathTableDialogVisible=true
        this.pathTableDialogData=row
      }
      if('RANGE_GROUP'==row.type){
        this.rangeTableDialogVisible=true
        this.rangeTableDialogData=row
      }
      if('CUSTOM_GROUP'==row.type){
        this.customTableDialogVisible=true
        this.customTableDialogData=row
      }
    },
    tableDialogVisibleClose(e){
      this.rangeTableDialogVisible = e
      this.rangeTableDialogData={}
      this.pathTableDialogVisible = e
      this.pathTableDialogData={}
      this.poiTableDialogVisible = e
      this.poiTableDialogData={}
      this.customTableDialogVisible = e
      this.customTableDialogData={}
    },
    handleSettingStyle(row){
      if('POI_GROUP'==row.type){
        this.poiGroupStyleDialogVisible=true
        this.poiGroupStyleDialogData=row
      }
      if('PATH'==row.type){
        this.pathStyleDialogVisible=true
        this.pathStyleDialogData=row
      }
      if('RANGE'==row.type){
        this.rangeStyleDialogVisible=true
        this.rangeStyleDialogData=row
      }
      this.parentId=row.parentId;
      this.grandParentId=row.parentId;
    },
    styleDialogVisibleClose(e){
      this.rangeStyleDialogVisible = e
      this.rangeStyleDialogData={}
      this.pathStyleDialogVisible = e
      this.pathStyleDialogData={}
      this.poiGroupStyleDialogVisible = e
      this.poiGroupStyleDialogData={}
      this.refreshLoadTree(this.parentId,this.grandParentId);
    },
    copyGroup(row){
      this.$confirm('确认要复制该图层吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        copySceneSrc({
          srcId: row.id
        }).then(response => {
          this.$message({
            message: response.message,
            type: 'success',
            duration: 500
          })
          this.refreshLoadTree(row.parentId)
        })
      })
    },
    deleteRow: function(rows) { /* 删除行 */
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSceneSrc({
          id: rows.id
        }).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          const { parentId } = rows // 取出当前删除行的父节点id
          const parentIds = '' + parentId
          if (parentIds === '0') {
            this.queryForm.rootId = '0'
            this.load()
          } else {
            this.refreshLoadTree(parentIds)
          }
        })
      })
    },
    refreshLoadTree: function(parentId, grandParentId) { /* 局部刷新列表 */
      if (this.maps.get(parentId)) {
        const { tree, treeNode, resolve } = this.maps.get(parentId) // 根据父节点id取出对应的节点数据
        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])// 将对应节点下的数据清空，从而实现数据的重新加载
        this.load(tree, treeNode, resolve)
      } else {
        if (this.maps.get(grandParentId)) {
          const { tree, treeNode, resolve } = this.maps.get(grandParentId)
          this.$set(this.$refs.table.store.states.lazyTreeNodeMap, grandParentId, [])
          this.load(tree, treeNode, resolve)
        } else {
          this.load()
        }
      }
    }
  }
}
</script>

<style lang="scss">

</style>
